<div class="main-container">
  <header class="header-6">
    <div class="branding">
      <a routerLink="/home"
        class="nav-link">
        <clr-icon shape="vm-bug"></clr-icon>
        <span class="title">Project Clarity</span>
      </a>
    </div>
    <div class="header-nav">
      <a [routerLink]="'/home'"
        routerLinkActive="active"
        class="nav-link nav-text">Home</a>
      <a [routerLink]="'/about'"
        routerLinkActive="active"
        class="nav-link nav-text">About</a>
      <a [routerLink]="'/store/home'"
        routerLinkActive="active"
        class="nav-link nav-text">Store Lib</a>
    </div>
    <div class="header-actions">
      <a href="javascript://"
        class="nav-link nav-icon"
        aria-label="settings">
        <clr-icon shape="cog"></clr-icon>
      </a>
    </div>
  </header>

  <div class="content-container">
    <div class="content-area">
      <router-outlet></router-outlet>
    </div>
  </div>

</div>
